<template>
<div>
  <el-row style="background: white">
    <el-col :span="24">
      <div class="tbUpDiv"><img src="src/public/imgs/3~~~13A7E$84RV~7O3L6@F1.png" class="tbImg">
        <span class="tbUpPost">考勤汇总报表</span>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col>
      <div style="border: 1px solid gainsboro;width: 94%;margin: 0px auto;height: 150px">
        <div style="display: flex;border-bottom:1px solid gainsboro;height: 65px">
          <div style="background: rgb(239,239,239);width: 160px;font-size: 12px;display: flex;align-items: center;"><span style="margin-left: 20px">展示列：</span></div>
          <div>
            <div style="height: 30px;display: flex;align-items: center;">
              <el-checkbox  type="checkbox"  label="部门" size="small" style="margin-left: 30px;color: black"/>
              <el-checkbox  type="checkbox" size="small" label="岗位" style="color: black"/>
              <el-checkbox  type="checkbox"  label="应出勤天数" size="small" style="color: black"/>
              <el-checkbox  type="checkbox" size="small" label="实出勤天数" style="color: black"/>
            </div>
            <div style="height: 30px;display: flex;align-items: center;">
              <el-checkbox  type="checkbox"  label="迟到" size="small" style="margin-left: 30px;color: black"/>
              <el-checkbox  type="checkbox" size="small" label="早退" style="color: black"/>
              <el-checkbox  type="checkbox"  label="严重迟到" size="small" style="color: black"/>
              <el-checkbox  type="checkbox" size="small" label="严重早退" style="margin-left:12px;color: black"/>
              <el-checkbox  type="checkbox" size="small" label="旷工" style="color: black"/>
              <el-checkbox  type="checkbox"  label="漏签" size="small" style="color: black"/>
              <el-checkbox  type="checkbox" size="small" label="请假" style="color: black"/>
            </div>
          </div>
        </div>
        <div style="display: flex;border-bottom:1px solid gainsboro;height: 42px ">
          <div style="background: rgb(239,239,239);width: 160px;font-size: 12px;display: flex;align-items: center;"><span style="margin-left: 20px">时间范围：</span></div>
          <div style="margin-left: 29px;margin-top: 4px">
            <el-radio-group v-model="radio1" size="small">
              <el-radio-button  label="今天"/>
              <el-radio-button label="本周" />
              <el-radio-button label="本月" />
              <el-radio-button label="上个月" />
              <el-radio-button label="本年" />
              <el-radio-button label="指定范围" />
            </el-radio-group>
            <span style="display:block;width: 200px;height: 30px;margin-left: 340px;margin-top: -28px">
                <el-date-picker
                    v-model="d.zdate"
                    type="date"
                    style="width: 100%"
                    v-if="radio1=='指定范围'"
                />
              </span>
          </div>
        </div>
        <div style="display: flex;height: 40px">
          <div style="background: rgb(239,239,239);width: 160px;font-size: 12px;display: flex;align-items: center;"><span style="margin-left: 20px">查看范围：</span></div>
          <div style="display: flex;align-items: center;margin-left: 29px">
          <el-radio-group v-model="radio2" size="small" class="elradiog">
            <el-radio-button label="岗位"/>
            <el-radio-button label="部门"/>
            <el-radio-button label="人员"/>
            <el-radio-button label="我的下属" />
          </el-radio-group>
          <span style="font-size:5px;display: block;width: 200px;margin-left: 30px">
              <el-input
                  v-model="input2"
                  class="w-50 m-2"
                  :suffix-icon="Search"
              />
            </span>
        </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col>
      <el-table :data="tableData" style="width: 94%;margin-left: 37px">
          <el-table-column prop="name" label="姓名" width="100" />
          <el-table-column prop="sex" label="部门" width="100" />
          <el-table-column prop="address" label="岗位" width="100" />
          <el-table-column prop="where" label="应出勤" width="100" />
          <el-table-column prop="steta" label="实出勤" width="100" />
          <el-table-column prop="steta1" label="迟到" width="90" />
          <el-table-column prop="steta2" label="严重迟到" width="120" />
          <el-table-column prop="steta3" label="早退" width="90" />
          <el-table-column prop="steta4" label="严重早退" width="120" />
          <el-table-column prop="steta5" label="旷工" width="100" />
          <el-table-column prop="steta6" label="漏签" width="100" />
          <el-table-column prop="steta7" label="请假" width="100" />
      </el-table>
    </el-col>
  </el-row>
  <el-row >
    <el-col>
      <el-pagination
          v-model:currentPage="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[5,10, 20, 30, 40]"
          small="small"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="sizeChange"
          @current-change="currentChange"
          style="margin-left: 35px"
      />
    </el-col>
  </el-row>
</div>
</template>

<script lang="ts" setup>
import {ref,reactive,toRefs} from "vue";

const  d=reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  tableData:[],
  //指定日期
  zdate:'',
})
//人员部门搜索框
const input2 = ref('');
const {tableData,total,pageNo,pageSize,zdate} = toRefs(d);
//单选按钮
const radio1 = ref()
const radio2 = ref()
</script>

<style scoped>
.tbUpDiv{
  width: 100%;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  position: relative;
}
.tbImg{
  margin-left: 30px;
  margin-top: 15px;
}
.tbUpPost{
  position: relative;
  top: -19px;
  left: 20px;
}

</style>